<template>
    <view :style="'direction:' + $t('dir')" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'">
        <navbar :title="$t('dir') == 'rtl' ? 'ئۇچۇر توپى' : '信息群'" :back="true" />

        <view class="main">
            <view class="group-list">
                <view v-for="(item, index) in groupList" :key="index" class="group-item" @click="previewImage(item.wechat_code_url)">
                    <view class="group-info">
                        <text class="group-name">{{ $t('dir') == 'rtl' ? item.title : title.cn}}</text>
                        <text class="group-desc">{{ $t('dir') == 'rtl' ? item.info_content : title.info_content_cn}}</text>
                    </view>
                    <image :src="item.wechat_code_url" mode="aspectFit" class="qr-code" />
                </view>
            </view>

            <u-loadmore :status="loadmoreStatus" :loading-text="$t('loadingText')" 
                loadmore-text="." nomoreText="." :isDot="true" 
                :line="loadmoreStatus == 'nomore'" color="#bfbfbf" />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            page: 1,
            groupList: [],
            loadmoreStatus: 'loadmore',
            last_page: 1
        }
    },
    onLoad() {
        this.getGroupList()
    },
    onShow() {},
    async onPullDownRefresh() {
        this.page = 1
        await this.getGroupList()
        uni.stopPullDownRefresh()
    },
    async onReachBottom() {
        if (this.loadmoreStatus === 'loadmore' && this.page < this.last_page) {
            this.page++
            await this.getGroupList()
        }
    },
    methods: {
        async getGroupList() {
            this.loadmoreStatus = 'loading'
            try {
                const res = await this.$uniapi('/wechat_qun', {
                    page: this.page,
                    pageSize: 10
                })
                
                if (res.code === 200) {
                    this.last_page = res.list.last_page
                    
                    if (this.page === 1) {
                        this.groupList = res.list.data
                    } else {
                        this.groupList.push(...res.list.data)
                    }
                    
                    this.loadmoreStatus = this.page >= this.last_page ? 'nomore' : 'loadmore'
                }
            } catch (err) {
                this.loadmoreStatus = 'loadmore'
                console.error(err)
            }
        },
        previewImage(url) {
            if (!url) return;
            uni.previewImage({
                urls: [url],
                current: 0,
                indicator: 'number',
                loop: false
            });
        }
    }
}
</script>

<style lang="scss">
.main {
    padding: 20rpx;
}

.group-list {
    .group-item {
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .group-info {
            flex: 1;
            margin-right: 20rpx;

            .group-name {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
                display: block;
            }

            .group-desc {
                font-size: 28rpx;
                color: #666;
                display: block;
            }
        }

        .qr-code {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
        }
    }
}
</style>